import React, { useState } from 'react';
import { Row, Col } from 'antd';
import { Input } from 'antd';
import { DatePicker, Space, Modal } from 'antd';
import { Select } from 'antd';
import { Button, Menu, Dropdown, Form, Radio } from 'antd';
const { RangePicker } = DatePicker;
import { Table } from 'antd';
const { Option } = Select;
import { history } from 'umi';
import { DownOutlined, UpOutlined } from '@ant-design/icons';

import { FormInstance } from 'antd/lib/form';
import { Transfer } from 'antd';
import request from '../../../http';

//教师信息维护
const xinzheng = (props: any) => {
  //数据传送父组件
  const [teacher, setTeacherData]: any = useState({
    teacherName: null, //教师姓名
    account: null, //工号
    cardid: null, //身份证号码
    sex: null, //性别
    tel: null, //手机号码
    type: null, //职位
  });
  //把数据装到data里面，然后返回回去
  let data: any = [teacher];
  props.callback(data);
  console.log('教师新增我是子组件的值', data);

  const [Zhiwei, setZw] = React.useState([{}]);
  const [Xingbie, setXb] = React.useState([{}]);

  React.useEffect(() => {
    //14教师管理 职位下拉框地址 缺请求参数
    request.get('/TeacherManage/admin/getTeacherType').then(
      (result: any) => {
        console.log('教师管理 职位下拉框地址result数据', result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log('教师管理 职位下拉框地址result.data数据', result.data);
          setZw(result.data);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    //14教师管理 职位下拉框地址 缺请求参数
    request.get('/TeacherManage/admin/getSex').then(
      (result: any) => {
        console.log('教师管理 性别下拉框地址result数据', result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log('教师管理 性别下拉框地址result.data数据', result.data);
          setXb(result.data);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
  }, []);

  // const [jsxmData,setJsxmData]:any = React.useState();

  // //获取表单的数据，传给父主键
  // let data:any=[jsxmData];
  // props.callback(data);

  const onSubmit = (value: any) => {
    //获取老师姓名
    console.log(value);
    //发送网络请求
  };

  const formItemLayout = {
    labelCol: {
      // xs: { span: 24 },
      // sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  const [form] = Form.useForm();
  const onGenderChange = (value: string) => {
    switch (value) {
      case 'male':
        form.setFieldsValue({ note: 'Hi, man!' });
        return;
      case 'female':
        form.setFieldsValue({ note: 'Hi, lady!' });
        return;
      case 'other':
        form.setFieldsValue({ note: 'Hi there!' });
    }
  };

  return (
    <div>
      <Form onFinish={onSubmit} {...formItemLayout}>
        <div>
          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item name="teacherName" label="教师姓名：">
              <Input
                onChange={(e) => {
                  console.log('教师姓名e值', e.target.value);
                  //setUsername(e.target.value);
                  setTeacherData({
                    ...teacher,
                    teacherName: e.target.value,
                  });
                }}
              />
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item name="account" label="工号：">
              <Input
                onChange={(e: any) => {
                  console.log('工号e值', e.target.value);
                  setTeacherData({
                    ...teacher,
                    account: e.target.value,
                  });
                }}
              />
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item name="cardid" label="身份证号码：">
              <Input
                onChange={(e: any) => {
                  console.log('身份证号码e值', e.target.value);
                  setTeacherData({
                    ...teacher,
                    cardid: e.target.value,
                  });
                }}
              />
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item name="sex" label="性别：">
              <Select
                placeholder="请选择"
                allowClear
                onChange={(e: any) => {
                  console.log('性别e值', e);
                  setTeacherData({
                    ...teacher,
                    sex: e,
                  });
                }}
              >
                {Xingbie.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.id}>
                      {cNameObj.teacherType}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item name="tel" label="手机号码：">
              <Input
                onChange={(e: any) => {
                  console.log('手机号码e值', e.target.value);
                  setTeacherData({
                    ...teacher,
                    tel: e.target.value,
                  });
                }}
              />
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item name="type" label="职位：">
              <Select
                placeholder="请选择"
                allowClear
                onChange={(e: any) => {
                  console.log('职位e的值', e);
                  setTeacherData({
                    ...teacher,
                    type: e,
                  });
                }}
              >
                {Zhiwei.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.id}>
                      {cNameObj.teacherType}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ clear: 'left', width: '1000px' }}></div>
        </div>
      </Form>
    </div>
  );
};

export default xinzheng;
